<template>
	<div class="container">
		<!-- 分类标签 -->
		<section class="category-section">
			<h2>全部分类</h2>
			<ul class="category-list">
				<li v-for="(item, index) in categories" :key="index">{{ item }}</li>
			</ul>
		</section>

		<!-- 最近收藏 -->
		<section class="recent-collection">
			<h2>最近收藏</h2>
			<div class="collection-item" v-for="(item, index) in collections" :key="index">
				<image src="../../../static/sy.jpg" class="avatar"></image>
				<div class="info">
					<p>{{ item.name }} {{ item.age }}岁</p>
					<p>{{ item.timeAgo }}</p>
					<p>{{ item.content }}</p>
				</div>
				<video controls>
					<source :src="item.videoUrl" type="video/mp4" />
				</video>
				<div class="action-bar">
					<div class="action" @click="likeItem(index)">
						<span class="icon">👍</span>
						<span>{{ item.liked ? '取消赞' : '点赞' }}</span>
					</div>
					<div class="action" @click="commentItem(index)">
						<span class="icon">💬</span>
						<span>评论</span>
					</div>
				</div>
			</div>
		</section>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				categories: ['文字写作', '技术分享', '漫画绘画', '短视频', '音乐/播客', '游戏', '商品', '其他'],
				collections: [{
						name: '不吃香菜',
						age: 23,
						timeAgo: '3小时前',
						content: '今天也是快乐的一天！',
						videoUrl: 'https://sfile.chatglm.cn/api/cogvideo/4b17927c-7a5f-11ef-8b62-da786927fd11_0.mp4',
						liked: false,
						comments: []
					},
					// ...可以添加更多收藏项
				]
			};
		},
		methods: {
			likeItem(index) {
				this.collections[index].liked = !this.collections[index].liked;
				// 这里可以添加点赞的逻辑，例如发送到服务器等
			},
			commentItem(index) {
				// 这里可以弹出评论框或者跳转到评论页面
				console.log('评论收藏项', index);
			}
		}
	};
</script>

<style scoped>
	/* 容器样式 */
	.container {
		padding: 10px;
	}

	/* 导航栏样式 */
	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		background-color: #fff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	/* 分类标题样式 */
	.category-section h2,
	.recent-collection h2 {
		margin-bottom: 10px;
		font-size: 20px;
		color: #333;
		font-weight: bold;
	}

	/* 分类列表样式 */
	.category-list {
		display: flex;
		list-style-type: none;
		padding-left: 0;
	}

	.category-list li {
		margin-right: 10px;
		margin-bottom: 10px;
		padding: 8px 15px;
		background-color: #f8f8f8;
		border-radius: 20px;
		font-size: 14px;
		color: #666;
		cursor: pointer;
	}

	/* 收藏项样式 */
	.collection-item {
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
		padding: 10px;
	}

	.collection-item image {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 15px;
	}

	.collection-item p {
		margin: 5px 0;
		font-size: 16px;
		color: #333;
	}

	/* 视频样式 */
	.collection-item video {
		width: 100%;
		height: 400px;
		margin-top: 10px;
		border-radius: 8px;
	}

	/* 操作栏样式 */
	.action-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20px;
		padding: 10px 0;
		border-top: 1px solid #f0f0f0;
		/* 添加分隔线 */
	}

	/* 操作按钮样式 */
	.action {
		display: flex;
		align-items: center;
		padding: 8px 15px;
		border-radius: 50px;
		/* 圆角按钮 */
		background-color: #f4f4f4;
		/* 背景颜色 */
		margin: 0 5px;
		/* 添加外边距 */
		transition: background-color 0.3s, transform 0.3s;
		/* 添加过渡效果 */
	}

	/* 图标样式 */
	.icon {
		color: #666;
		margin-right: 5px;
		font-size: 18px;
	}

	/* 文字样式 */
	.action span {
		font-size: 14px;
		color: #666;
		font-weight: 500;
		/* 加粗文字 */
	}

	/* 悬停效果 */
	.action:hover,
	.action:focus {
		background-color: #e0e0e0;
		/* 悬停背景颜色 */
		transform: scale(1.05);
		/* 悬停时放大效果 */
	}

	.action:hover span,
	.action:focus span {
		color: #333;
		/* 悬停时文字颜色 */
	}

	/* 响应式设计 */
	@media (max-width: 768px) {
		.category-list li {
			flex: 1 0 48%;
			/* 在小屏幕上，每行显示两个分类 */
		}
	}
</style>